<template>
    <view class="order-container">
        <GZGJHeader title="订单记录" show-back="true"></GZGJHeader>
        <scroll-view class="order-body-container" scroll-y="true">
            <order-item
                class="order-item-container"
                v-for="(orderItem, index) in orderItems"
                :serial-number="index + 1"
                :order-number="orderItem.orderNumber"
                :send-time="orderItem.sendTime"
                :type="orderItem.type === 0 ? '信件' : '短信'"
                :amount="orderItem.amount"
            ></order-item>
        </scroll-view>
    </view>
</template>

<script setup>
import { onBeforeMount, onMounted, ref, watch } from 'vue';
import GZGJHeader from '@/components/GZGJHeader.vue';
import OrderItem from '@/components/OrderItem.vue';
const orderItems = ref([]);
onBeforeMount(() => {
    const orderItem = {
        orderNumber: '115148919841941',
        sendTime: '2023-08-01 11:11:01',
        type: 0,
        amount: 0.1
    };
    for (let i = 0; i < 10; i++) {
        const newOrderItem = { ...orderItem };
        newOrderItem.type = Math.round(Math.random());
        newOrderItem.amount = Math.round(Math.random() * 100) + 100;
        orderItems.value.push(newOrderItem);
    }
});
function goBack() {
    console.log('我处理了');
    // callback(true);
}
onMounted(() => {});
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.order-container {
    @extend .column-container-layout;
    justify-content: flex-start;
    .order-body-container {
        @extend .column-container-layout;
        flex: 1;
        justify-content: flex-start;
        .order-item-container {
            margin-bottom: 15px;
            margin: 15px;
            width: auto;
        }
        :deep(.uni-scroll-view) {
            overflow: hidden;
        }
    }
}
</style>
